<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<link rel="stylesheet" type="text/css" href="./css/start_class.css"/>
	</head>
	<body>
		<!--顶部导航 logo-->
		<div class="center-top">
			<div class="center-top-main">
				<div class="logo">
					<img src="img/logo.png" alt=""/>
				</div>
				<div class="center-name">学习中心</div>
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">课程中心</a>
					</li>
					<li>
						<a href="#">模拟题库</a>
					</li>
					<li>
						<img src="./img/thumb.png"/>
						<a href="#" class="my-class">我的网课</a>
					</li>
					<li>
						<img src="./img/shopcar.png"/>
						<a href="#">购课车</a>
					</li>
					<li>
						<img src="./img/tips.png"/>
						<a href="#">消息</a>
					</li>
					<li class="download-box">
						<a href="#" class="download">APP下载</a>
						<img src="./img/up.png" class="download-up"/>
						<img src="./img/downh.png" class="download-down"/>
						<div class="er-box">
							<img src="img/er.png"/>
							<span>雨露众德APP</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--顶部个人基本信息-->
		<div class="person-info">
			<div class="person-info-main">
				<div class="person-thumb">
					<img src="./img/er.png"/>
				</div>
				<div class="person-name-rank">
					<div class="person-name">Z夯实</div>
					<div class="person-rank">
						<img src="img/king.png"/>
						<span>注册会员</span>
					</div>
				</div>
				<div class="person-info-right">
					<div class="person-cards">
						<div class="person-cards-num">1张</div>
						<div class="person-cards-name">优惠券</div>
					</div>
					<div class="person-cards">
						<div class="person-cards-num">123</div>
						<div class="person-cards-name">积分</div>
					</div>
					<div class="signin">
						<div class="signin-btn">签到领积分</div>
						<div class="signin-tip">您今天还没有签到</div>
					</div>
				</div>
				<div class="center-ad">
					<img src="img/center-ad.jpg" alt=""/>
				</div>
				<div class="my-message">
					您有<em>1</em>条未读信息
					<span class="close-message"> X </span>
				</div>
			</div>
		</div>
		<!--主要内容-->
		<div class="center-main">
			<div class="test-card-box">
				<h5>学习进度</h5>
				<div class="my-char">
					<div id="my-char">
						<div class="big-char">
							<div class="big-left-char">
								<div class="big-left-char-ico"></div>
							</div>
							<div class="big-right-char">
								<div class="big-right-char-ico"></div>
							</div>
							<div class="big-mask"></div>
						</div>
						<div class="small-char">
							<div class="small-left-char">
								<div class="small-left-char-ico"></div>
							</div>
							<div class="small-right-char">
								<div class="small-right-char-ico"></div>
							</div>
							<div class="small-mask"></div>
						</div>
					</div>
					<div class="my-char-desc clearfix">
						<div class="fl">
							<span class="blue-desc"></span>
							直播课：55%
						</div>
						<div class="fr">
							<span class="yellow-desc"></span>
							录播课：55%
						</div>
					</div>
				</div>
				<div class="do-something">
					<div class="do-list clearfix">
						<a href="#">
							<img src="./img/l1.png"/>
							我的答疑
						</a>
						<a href="#">
							<img src="./img/l2.png"/>
							求助考友
						</a>
						<a href="#">
							<img src="./img/l3.png"/>
							APP看课
						</a>
						<a href="#">
							<img src="./img/l4.png"/>
							申请重修
						</a>
					</div>
				</div>
			</div>
			<div class="test-paper-box">
				<h5 class="clearfix">
					<span class="fl">小白定制专享班</span>
					<span class="class-type fl">直播+录播</span>
					<span class="class-time fl">有效期：2020年11月11日</span>
					<div class="level-change fr">
						<img src="img/rl.png" class="fl"/>
						<select class="fl">
							<option>2019版本</option>
							<option>2020版本</option>
						</select>
					</div>
				</h5>
				<div class="video-change">
					<span class="active">
						直播课程
						<i></i>
					</span>
					<span>
						录播课程
						<i></i>
					</span>
				</div>
				<div class="class-tab-box">
					<div class="class-tab clearfix">
						<a href="javascript:;" class="active">建筑工程与实务</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<a href="javascript:;">建筑工程与实务实务教辅</a>
						<span class="big-down"></span>
					</div>
					<div class="class-list chapter-box">
						<ul>
							<li>
								<i class="showchild"></i>
								<span>二级建造师2020年直播课程 </span>
							</li>
							<dl style="display: none;">
								<dt>
									<i class="showchild"></i>
									<span>二级建造师2020年直播课程</span>
								</dt>
								<div class="child" style="display: none;">
									<dd>
										<span class="class-item">
											二级建造师2020年直播课程
										</span>
										<span class="time-long">01:10:00</span>
										<span class="play-btn">
											<a href="#">
												<img src="./img/pl.png"/>
											</a>
										</span>
									</dd>
								</div>
							</dl>
							<li>
								<i class="showchild"></i>
								<span>二级建造师2020年直播课程 </span>
							</li>
							<dl style="display: none;">
								<dt>
									<i class="showchild"></i>
									<span>二级建造师2020年直播课程</span>
								</dt>
								<div class="child" style="display: none;">
									<dd>
										<span class="class-item">
											二级建造师2020年直播课程二级建造师2020年直播课程二级建造师2020年直播课程二级建造师2020年直播课程二级建造师2020年直播课程
										</span>
										<span class="time-long">01:30:00</span>
										<span class="play-btn">
											<a href="#">
												<img src="./img/pl.png"/>
											</a>
										</span>
									</dd>
								</div>
							</dl>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--底部-->
		<footer>
			<div class="footer-box">
				<div class="footer-top">
					<div class="footer-logo">
						<img src="img/flogo.png"/>
					</div>
					<div class="footer-nav">
						<ul>
							<li>
								<a href="#">了解雨露</a>
							</li>
							<li>
								<a href="#">帮助与支持</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">关于我们</a>
							</li>
							<li>
								<a href="#">联系我们</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">网站声明</a>
							</li>
							<li>
								<a href="#">反馈建议</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">售后中心</a>
							</li>
							<li>
								<a href="#">侵权举报</a>
							</li>
						</ul>
					</div>
					<div class="app-wechat">
						<div class="app">
							<div class="app-img">
								<img src="img/er1.png" />
							</div>
							<p>下载雨露众德app</p>
						</div>
						<div class="app">
							<div class="app-img">
								<img src="img/er2.png" />
							</div>
							<p>关注微信公众号</p>
						</div>
					</div>
				</div>
				<div class="footer-bottom">
					<p>全国客服热线：400-1767-214 京ICP备17069128号-1 京公网安备17069128</p>
					<p>Copyright 2017-2020 雨露众德教育集团</p>
				</div>
			</div>
		</footer>
		<script src="./js/jquery-1.11.3.min.js"></script>
		<script src="./js/public.js"></script>
		<script>
			$(".showchild").click(function(){
				$(this).parent().next().slideToggle(270);
				$(this).toggleClass('rotate');
			})
			$('.big-char').each(function(index, el){
			    var num = 10 * 3.6;
			    if (num<=180) {
			        $(this).find('.big-right-char-ico').css('transform', "rotate(" + num + "deg)");
			    } else {
			        $(this).find('.big-right-char-ico').css('transform', "rotate(180deg)");
			        $(this).find('.big-left-char-ico').css('transform', "rotate(" + (num - 180) + "deg)");
			    };
			});
			$('.small-char').each(function(index, el){
			    var num = 30 * 3.6;
			    if (num<=180) {
			        $(this).find('.small-right-char-ico').css('transform', "rotate(" + num + "deg)");
			    } else {
			        $(this).find('.small-right-char-ico').css('transform', "rotate(180deg)");
			        $(this).find('.small-left-char-ico').css('transform', "rotate(" + (num - 180) + "deg)");
			    };
			});
		</script>
	</body>
</html>
